#html online tutorial | Explore Tumblr posts and blogs

kumakechi · 2 months ago

Text

i need to learn 3d modelling so that more than anything my power to mod persona 4 golden can grow

#rambles #modding #the thing is i'm SO BAD at following tutorials #i've always learned better by doing my own thing. messing around with whatever tool it is until it works #but that isn't really something i can do with 3d modelling.#or at least it's not something i can do at a total beginner level. i imagine it'll be kinda like how i learned coding #(did a couple free online classes and once i learned the very basics/got bored i just did my own thing)#but i started THAT when i was like 14. i wanna be as good at blender as i am with html/css NOW!!!!!!#<- is not even that good w html #<- because of the aforementioned ''hates taking classes on this kind of thing'' thing

3 notes · View notes

hob28 · 11 months ago

Text

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

color: blue;

font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Styled Page</title>

</head>

<body>

<h1 class="main-heading">Hello, World!</h1>

<p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

color: green;

text-align: center;

}

#intro {

font-size: 18px;

color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

display: flex;

justify-content: space-around;

}

.item {

width: 100px;

height: 100px;

background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

#how to learn html and css #html & css course #html & css tutorial #html and css #html course #html css tutorial #html learn #html learn website #learn html #learn html and css #html and css course #html and css full course #html and css online course #how to learn html and css for beginners

3 notes · View notes

arshikasingh · 1 year ago

Text

Basic HTML Interview Questions

Following are the basic interview questions that you must know:

What is HTML?

What are Tags?

Do all HTML tags have an end tag?

What is formatting in HTML?

How many types of heading does an HTML contain?

How to create a hyperlink in HTML?

Which HTML tag is used to display the data in the tabular form?

What are some common lists that are used when designing a page?

What is the difference between HTML elements and tags?

What is semantic HTML?

3 notes · View notes

royalwebdesigner · 1 month ago

Text

Build E-commerce Website with HTML, CSS, JS | 2025 Tutorial

#e-commerce website tutorial #build e-commerce website HTML CSS JS #HTML CSS JavaScript tutorial #responsive e-commerce website #web development 2025 #coding tutorial for beginners #create online store website #front-end development

0 notes

furiouslovepolice · 4 months ago

Text

0 notes

thunderlina · 5 months ago

Text

In the wake of the TikTok ban and revival as a mouthpiece for fascist propaganda, as well as the downfall of Twitter and Facebook/Facebook-owned platforms to the same evils, I think now is a better time than ever to say LEARN HTML!!! FREE YOURSELVES FROM THE SHACKLES OF MAJOR SOCIAL MEDIA PLATFORMS AND EMBRACE THE INDIE WEB!!!

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

And really this is just general tip-of-the-iceberg stuff. If you dig a little deeper you can find loads more interesting stuff out there. The internet doesn't have to be a miserable place full of nothing but doomposting and targeted ads. The first step to making it less miserable is for YOU, yes YOU, to quit spending all your time on it looking at the handful of miserable websites big tech wants you to spend all your time on.

#this is a side point so it's going here but I really think tech literacy should be a requirement in schools like math grammar history etc.#we live in a world so dominated by the stuff and yet a majority of the population does not understand it at even the most fundamental level #tiktok #tiktok ban #indie web #neocities #web development #current events #twitter #facebook #meta #amazon

11K notes · View notes

oflgtfol · 2 years ago

Text

i have a 3d model thing i have in mind that i want to create for a webpage kinda thing but first i need to learn javascript. and then i must learn threejs

#ive been meaning to learn javascript anyway #i know how to program in twrms of like. computation #thats all ive ever had experience with #but ive been attempting to build my own github website to be like an online CV #but erm i only know basic html which is. not enough to build an impressive website #and the way to make it impressive is CSS and javascript which erm. no fucking idea bro #ive just been fucking around with prewritten codes and tutorials i found online but ive mostly given up for now #but now? i have an idea that i want to make reality. but first i need to learn. So much #brot posts

0 notes

webtutors01 · 2 years ago

Text

Best code learning websites, learn to code for beginners, learn online coding

Best code learning websites for how long it takes to learn to code, it really depends on your goals, dedication, and the complexity of the language. HTML is relatively simple and you can get a good grasp of its basics in a few weeks if you dedicate a few hours each day. However, mastery and fluency might take a few months of consistent practice.Online Tutorials and Courses: Websites like Codecademy, freeCodeCamp, and W3Schools offer free tutorials on HTML. They provide interactive lessons that guide you through the basics and more advanced concepts. There are many free tutorials on YouTube covering HTML for beginners.

The time it takes to learn coding can vary depending on several factors, including the programming language you choose, the how long to learn coding complexity of the projects you want to work on, and your prior experience with technology. However, many people can acquire basic coding skills in a few months with consistent effort.Learning to code for free is very much possible with the resources available online. Many platforms offer free courses and tutorials. While paid courses might offer more comprehensive content and support, you can definitely start and make significant progress without spending any money.

Coding teaches you how to break down complex problems into smaller, more manageable parts and develop logical solutions. Critical Thinking: Programming encourages logical thinking and improves your ability to analyze and solve problems. Coding allows you to create something from scratch, whether it's a website, app, or game. It's a way to express creativity through technology. In today's technology-driven world, coding is a valuable skill that is in high demand across various industries.

Coding enables you to automate repetitive tasks, making processes more efficient. Career Opportunities: Knowing learn coding for beginnershow to code opens up a wide range of career opportunities in fields such as software development, data science, web development, and more. Start with Basics: Begin with a beginner-friendly language like Python.

This hands-on experience is crucial for learning. Books and Documentation: Read coding books and explore documentation. Understanding how to use documentation is a vital skill for programmers. Participate in online coding communities like Stack Overflow or Reddit. Engaging with others can provide support and insights.

Best Code Learning Websites best coding language to learn firstOffers interactive coding lessons for various programming languages. Provides courses from universities and organizations worldwide. Similar to Coursera, edX offers a wide range of courses from universities and institutions. Focuses on project-based learning and offers nanodegree programs.

A nonprofit organization that provides free coding lessons and projects. Offers introductory coding courses in an interactive and beginner-friendly manner. A great resource for web development, offering tutorials on HTML, CSS, JavaScript, and more.

#code academy #online tutorial #html overview #coding academy

0 notes

raviws23 · 2 years ago

Text

#html #programming #language #webdevelopment #tutorial #online learning #html5 #coding #learn to code #code

1 note · View note

webtutorsblog · 2 years ago

Text

Uncovering 10 Advanced HTML Tags for Proficient Developers

In the vast universe of web development, HTML (Hypertext Markup Language) stands as the foundation upon which the entire web is built. From simple text formatting to structuring complex web pages, HTML tags play a crucial role in defining the structure, content, and appearance of a website. In this blog post, we're going to delve into the world of HTML tags, focusing on 10 advanced tags that can take your web development skills to new heights.

<canvas>: Unleash Your Creative Side

The <canvas> tag allows you to draw graphics, create animations, and render images directly on a web page. It's an essential tag for creating interactive games, data visualizations, and engaging multimedia content.

<video> and <audio>: Rich Media Experience

Enhance user engagement by embedding videos and audio files using the <video> and <audio> tags. These tags enable you to provide a seamless multimedia experience within your web pages.

Want to embed external content like maps, videos, or social media feeds? The <iframe> tag lets you do just that while maintaining a clean and responsive layout.

<progress>: Visualizing Progress

Display progress bars and indicators using the <progress> tag. It's great for showing the status of ongoing tasks, file uploads, or any process that requires visual feedback.

<details> and <summary>: Interactive Disclosure

Create interactive disclosure widgets using the <details> tags and <summary> tags. These are perfect for hiding and revealing additional content or information on demand.

<figure> and <figcaption>: Captioned Images

When you need to associate captions with images, the <figure> tags and <figcaption> tags provide a semantic way to do so, improving accessibility and structure.

<mark>: Highlighting Text

Emphasize specific text within paragraphs or blocks by using the <mark> tag. It's particularly handy for drawing attention to search terms or key points.

<time>: Semantic Time Representation

The <time> tag lets you mark up dates and times in a way that's machine-readable and user-friendly. It's an excellent choice for showing published dates or event schedules.

<article> and <section>: Structured Content

When organizing content, the <article> tags and <section> tags provide semantic structure. <article> is suitable for standalone content like blog posts, while <section> helps group related content together.

Unlock Your Full Coding Potential with WebTutor

If you're looking to master the art of web development and delve deeper into the world of HTML, CSS, JavaScript, and beyond, look no further than WebTutor. This premier online learning platform offers comprehensive courses and tutorials that cater to beginners and advanced learners alike.

With WebTutor, you will experience

Expert Instruction

Learn from industry professionals who are passionate about sharing their knowledge.

Hands-on Practice

Gain practical experience through interactive coding challenges and real-world projects.

Flexible Learning

Study at your own pace, fitting your learning journey into your busy schedule.

Supportive Community

Connect with fellow learners, ask questions, and collaborate on projects in a supportive online environment.

Whether you are a budding web developer or seeking to level up your skills, WebTutor provides the resources and guidance you need to excel in the world of coding. Visit today and embark on a journey of discovery and innovation!

In conclusion, HTML tags are the building blocks of the web, enabling developers to create diverse and engaging experiences for users. By harnessing the power of advanced HTML tags and supplementing your learning with WebTutor, you will be well on your way to becoming a proficient web developer capable of crafting exceptional online experiences.

#Advanced HTML tags #Learn Online HTML #Online HTML Tutorial #Introduction to HTML #HTML tutorials #Learn HTML online #Basic HTML tags #HTML tags

1 note · View note

sesamestreetkid · 10 months ago

Text

!!! my tag system is below all of this,,, I moved it under a cut because people reblog this post for the links :P

edit: thx for the love on this post. im going to try and continually update this!

⇩ ⠀sites FULL of web graphics ⇩

blinkie maker : make your own blinkies!

DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute!

GlowTxt : create glowing transparent text gifs that say whatever u want

HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies

plasticdino.neocities.org : blinkies

Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics

Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource

Adrian's blinkie collection : collection of blinkies, stamps, and buttons

☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons

twigbranch.carrd.co : blinkies

lallys.carrd.co : blinkies, stamps, dividers, and other resources

Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;)

unshinesblinkies.carrd.co : blinkies

The 88x31 GIF Collection : buttons. there are 5 parts! huge collection!

Bonnibel's Graphic Collection : blinkies

WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps

cass-tastrophe.carrd.co : blinkies, stamps

kotatsuOS : blinkies

Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute

⇩ some html tools! + tags below cut ⇩

MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it

my tagging system :))

#graphics

#blinkies

#stamps

#buttons

#dividers

#html/css

#resources

#code

e10's web (neocities.org) <- shameless site plug. show it some love :P

547 notes · View notes

reignpage · 2 months ago

Text

Tutorials for Aesthetics

Hi! Reign here :) this guide is dedicated to teaching you how to make:

a) colour gradient text b) dividers c) pictures with gradients

Now, as a disclaimer, I'm not saying you should have all these things on your posts. Having pretty things won't guarantee a boatload of interactions and aesthetics shouldn't take away from the actual substance of your writing. Many fics do very well without all the glitz and glamour, and indeed simplicity goes a long way.

You should always prioritise clarity, improvement, and conviction in your writings. Don't get caught up in trying to look pretty and definitely don't be copying other creators' aesthetics unless they've given consent for you to do so.

This serves only as a starting off point for exploring styles that suit you.

Another disclaimer is that Canva, since I wrote and posted this, has and might make more changes which will render parts of this guide inapplicable, but the main parts should remain the same. Canva is best used with premium but I understand that not everyone can and is willing to spend money on this. So my advice is to find a different platform and search up tutorials online.

How to get the colour gradient text!

༯ I use stuffbydavid.com

༯ Decide if you want a horizontal gradient/middle gradient/three coloured gradient

༯ Pick your colours + write out the text you'd like to be coloured in the text box

༯ You can see the preview and when you're happy copy all the text in the HTML code box

༯ Go on Tumblr, create a post, click the settings icon of the post, then in the Text Editor function change it from Rich Text to HTML

༯ All your coding will be pasted in the HTML side and they'll appear formatted in the Preview on your Tumblr post

How to make dividers!

༯ I use Canva

༯ Click Create a design

༯ Click Custom size -> for my colour gradient dividers, I use the 3000 x 40 px but you can use whatever sizing you'd like of course -> experiment to your liking

༯ Click the colour wheel to change your background colour

༯ You can do solid colours and use whatever hex code you'd like but to make gradients, scroll through the colour palettes to get to the different kinds of gradient options

༯ From there, you can change the colours of the gradient and adjust to your liking

༯ To download it, click Share, Download, keep it PNG, size 1 and Download for real

༯ On Tumblr, you're going to just drag and drop that downloaded image on the website or if you're on the app, just add it as a picture and adjust it where you'd like it to go on the post

༯ If you were to have drawings like the hearts or croissants for the divider, you'll want to adjust the Custom size, arrange the pictures or elements on the page, and download with a transparent background (it requires a premium subscription unfortunately but if you do the free trial and just make a bunch of banners and dividers before it runs out, you should be good)

༯ A lot of this will involve experimenting for what works for you. There's no cheat code to that, unfortunately. But have fun with it. Don't be afraid to trial and fail -- everyone did at some point

How to add gradient colour to pictures!

༯ Use Canva again

༯ Click Custom size -> 3000 x 800 px (or, again, whatever size you like)

༯ Pick a picture you like -> for manga panels, I like to use Pinterest

༯ Drag that picture onto the blank page and adjust to fit

༯ Click Add Page -> on that page, change the background colour. You can use solid colours or gradient colours, it's the same process as for making gradient dividers

༯ Click the colour page, copy and paste it on your picture

༯ Adjust the transparency of your picture depending on how opaque you'd like the colour to be

༯ Delete the colour page and keep the picture

༯ Then, again, click Share and Download

༯ This is the final product -> you can obviously find better pictures and do whatever colours you'd like, this was just an example

༯ I'm not very tech savvy so if my explaining is terrible, I am so sorry 😭 but hopefully this makes senses and encourages you to experiment and be bolder with your layout!

#Guide #Aesthetics #Canva

150 notes · View notes

oxygen537art · 24 days ago

Note

how do you draw hands so flipping well😓

Lots of practice, a solid understanding of basic anatomy and proportions, and constant referencing — whether from photos or life observations (either other people's hands or my own).

I'm honestly terrible at explaining things, and I'm not the kind of person who can do a step-by-step tutorial because it would be terrible too.

But in this post I want to share with you what I think are some useful resources about proportions and anatomy that I found on Pinterest and in the book "Anatomy for Sculptors" that I use in my own studies (you can find it online and even download it for free).

I hope this will be helpful.

Links that were used in the description of the pictures:

https://anatomicalart.tumblr.com/post/17150458550/more-doodle-tips-from-the-sister

https://murven.livejournal.com/19735.html

@/taco1704 on Twitter

#ask #art tips #reference

48 notes · View notes

geoledgy · 4 months ago

Note

your oc website is SO SO SO SO INCREDIBLY COOL how the hell do you even start learning how to do this ?? if you learned how to do this by yourself online, are there any tutorials or resources you can share with us? was making this website free??

omg THANK YOU SO SOOOOOO MUCH!!! It makes me so happy to hear that folks like my little site. I code my site with Phoenix Code (for the live viewer and number dials) and I host my site on Neocities - it is all free. Phoenix can be used in browser or on desktop, but I like having it on desktop more for big projects in case my files get deleted. I use the browser version when I just want to test something quickly.

The 2 videos I use and can not recommend enough to anyone who asks me are this HTML tutorial and this CSS tutorial. They are simple and easy to understand, but I recommend watching it the first go, and then following along the next few watches until you get the flow of basic parts to a website, how they're organized, and what order they go in. At this point, I've memorized exactly where everything goes, and it is all thanks to these 2 videos.

If I am being honest, I learned how to code by myself, not quite even with online tutorials but just from being stupid and messing around myself (1, because I was a kid, and 2, because I didn't understand English very well to know what tutorials are saying.) I used to do html coding for Neopet pages when I was a kid with too much online time, first by just editing the default petpages and adding info and images, and then just doing trial and error with the html. I'll just try something and then if it doesn't turn out the way I want it, I try to find out why it didn't work and also get inspiration from other similar sites to figure out where things go or how they coded (with this nifty thing called right click > inspect page or right click > view page source). And BOOM, working webpage.

It was rudimentary, white blank background without any boxes or anything, you just scrolled down the page and sections were separated by a horizontal bar. OH and every text was centered! I had no idea how to make scrolling boxes or fancy assets, but damn I still had so much fun working on it every weekend. When you find authentic selfmade sites from the 90s and 2000s, most of them aren't super fancy either unlike what modern nostalgia makes you think. So I hope you don't feel discouraged if you begin making a website and feel it isn't "fancy", you're already doing a first big step which is making a webpage and learned your first set of html code!

It was over a decade later before I coded webpages with html again. I've gotten lazy and started relying on site builders, but nothing was quite as versatile as html. I wanted to try coding my own OC site again, so that was when I started working on OutKrop (the site I posted). Until I started coding again, I had literally no idea what CSS even is (and let me tell you, it's a game changer!)

Personally, I work best when I can do things hands on. I don't read through tutorials, I code first then go back and read through coding help sites like w3schools when I find myself stuck and unable to figure something out. Sometimes I grab existing codes and play around with them to see what changes and what I can do with it, cuz having visual context is what helps me a lot.

I can also share my process:

Once I gather up some ideas, I make a sketch, including what boxes (divs in css) should approximately go. It is very rough, but shows me exactly what I need to know.

Next I load up my coding app (Phoenix Code in my case) and "sketch" the layout. Nothing fancy going on here, just putting things where they need to be, and fixing size of boxes and margins if needed. I give my boxes all a background color so I can easily see how big they are and where they are located.

After some adjustments like moving stuff around and adding assets like backgrounds and images, and changing colors of the boxes, rounding off corners, etc., we get this!

so recap + additional useful sites I use:

Coding app: Phoenix Code

Site hosted on: Neocities

Video tutorials: HTML and CSS

Sites for learning code: w3schools, also lissa explains is a great site that is written for kids to learn html so it's easy to understand. Finally, sadgrl has a lot of great resources for coding as well!

I recommend looking through these sites AFTER you tried taking a spin at coding - it doesn't have to be anything fancy just follow the HTML video tutorial I linked!

Thanks for the ask, and I hope this helps you and many others out there who are interested in building a site with html/css! Don't be afraid to get things "wrong" or have an "un-fancy" site. This is how you learn to code, and it'll become so easy once you get the hang of it.

Anyone is always more than welcome to reach out for coding help and advice :-]

#asks

58 notes · View notes

mysteryshoptls · 5 months ago

Note

Not a request, but how were you able to gain special colored text on tumblr? Cause I saw the Silver Chef Story translation and I saw a darker red color for Riddle’s name and a warm gray for Silver.

Sure, here's a quick tutorial on the colors! When you create a new post on desktop, there's a gear icon in the top right corner. You'll want to go to the Text Editor option and change it to HTML

You'll see your document change into HTML formatting, with all the notations that come with whatever you've already typed up. You'll want to add

Using Apprentice Chef Silver's vignette as an example:

(p indicates a paragraph and b indicates bold) This gave me:

You can find many sites online that'll list Hex colors to use here, and many drawing programs will also give you the colors you want. For example, the colors I've chosen for each of the students were color picked from one of their Birthday Boy ribbon colors!

#ras replies

83 notes · View notes

rafesangelita · 7 months ago

Note

my lovely sweet angel victoria, i need to know how you do custom text colours for your fics im so sick of this ugly ass pink especially when it doesn’t match the rest of my blog 😭

— mira ^_^

okay i’m going to use this ask as an opportunity to give a step by step tutorial on how i do this <3 (on mobile is the only way i know how to do it, but i don’t think it’s much different from desktop). i get a lot of questions about this so i’ll try to break it down as easily as i could!

1.) in order to have your text a certain color besides the ones tumblr gives you, you have to do it on a browser, since you can’t do it in-app. all this means, is that you have to be logged into tumblr on safari, google chrome, or any online browser of your choice.

2.) once you’re logged in, you’re going to go to this website and type the text that you want to be colored in the text margin.

3.) once you type in your text, you’re going to choose the first colored box and you can either make your own custom color using the slider (i recommend copying the hex code and pasting it in your notes so you don’t lose that specific color), or you can choose from the default settings.

4.) if you want to make a gradient text, then you’ll choose the color you want the first color you chose to fade into. but if you just want the word, sentence, or paragraph to be all one color, then you’ll copy and paste the previous color code into the second box.

5.) once you have your text and your color, or colors selected, you’re going to press ‘generate’.

6.) after you do that, you’ll scroll down and see a whole bunch of coding (it’s usually in a grey box).

7.) you’re going to tap it and press ‘copy’.

8.) now, go to the window where you’re logged into tumblr, and press the pencil icon so you can make a post.

9.) before you paste anything, you’re going to press the setting icon in the upper right corner, and find the box where it says ‘rich text’.

10.) once you find it, you’re going to press it, and choose the option that says ‘HTML’

11.) after you choose that option, now you can paste the coding from the website.

12.) it’s going to look like a lot, but once you save it as a draft, it’ll be your text in your desired color.

i hope this was clear and helpful! if you have existing posts that you want to edit and make with a different color, you’re going to edit it on browser, choose the ‘HTML’ option and repeat. once you save the post, you can edit it and move the text around where you want it IN the tumblr app <3

#໒꒰ྀིᵔ ᵕ ᵔ ꒱ྀི১ asks .ᐟ

66 notes · View notes